{extend name='admin@public/content'}
{block name='style'}
<style>
    .param-table-list {
        overflow: auto;
        max-height: 500px;
        position: relative;
        overflow-y: scroll;
    }

    .param-input-td {
        position: relative;
        padding: 0 !important;
    }

    .param-input-td.one {
        width: 15%;
    }

    .param-input-td.thr {
        width: 10%;
        text-align: center;
    }

    .param-input-td.four {
        width: 10%;
    }
    .param-input-td.five {
        width: 5%;
    }
    .param-input-td.six {
        width: 10%;
    }
    /*.param-input-td.one:before {*/
    /*content: ''*/
    /*}*/

    /*.param-input-td.two:before {*/
    /*content: ''*/
    /*}*/

    /*.param-input-td:before {*/
    /*margin: 4px;*/
    /*width: 40px;*/
    /*height: 30px;*/
    /*line-height: 30px;*/
    /*text-align: center;*/
    /*position: absolute;*/
    /*background: #e2e2e2;*/
    /*}*/

    .param-input-td input {
        /*padding-left: 50px;*/
        border: none !important;
    }
</style>
{/block}
{block name='content'}
<form onsubmit="return false;" action="" data-auto="true" method="post" class='form-horizontal layui-form'
      style='padding-top:20px'>

    <input type="hidden" name="id" value="{$vo.id}">
    <div class="row">
        {if empty($vo['content'])}

        <div class="item item_one" data-one="0">
            <div class="form-group">
                <label class="col-sm-2 control-label">
                    <button class="layui-btn layui-btn-sm layui-btn-danger del" type="button">删除</button>
                    小标题：<span class="nowrap"></span>
                </label>
                <div class='col-sm-8'>
                    <input type="text" name="content[0][title]" title="请输入" placeholder="请输入标题" value=""
                           class="layui-input">
                    <p class="help-block">如‘第一天’</p>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">内容：<br>
                    <button class="layui-btn layui-btn-sm add_one" type="button">添加</button>
                </label>
                <div class='col-sm-8 layui-layer-border row_one'>

                    <div class="item item_two" data-one="0" data-two="0">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                <button class="layui-btn layui-btn-sm layui-btn-danger del_one" type="button">删除</button>
                                小标题：<span class="nowrap"></span>
                            </label>
                            <div class='col-sm-8'>
                                <input type="text" name="content[0][content][0][title]" title="请输入" placeholder="请输入标题" value=""
                                       class="layui-input">
                                <p class="help-block">如‘上午’</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">内容：<span class="nowrap"></span></label>
                            <div class='col-sm-8'>
                                <div class="">
                                    <table class="layui-table margin-none">
                                        <tbody class="param-table-list item_three">

                                        <tr class="transition" data-one="0" data-two="0" data-three="0">
                                            <td class="param-input-td four nowrap">
                                                <button data-file="one" data-type="png,jpg,jpeg" data-field="content[0][content][0][content][0][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                                            </td>
                                            <td class="param-input-td five nowrap text-center">
                                                <img data-tips-image style="height:auto;max-height:38px;" src="__STATIC__/theme/img/image.png"/>
                                                <input type="hidden" name="content[0][content][0][content][0][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                                            </td>

                                            <td class="param-input-td two nowrap">
                                                <input name="content[0][content][0][content][0][content]" autocomplete="off" placeholder="请输入" class="layui-input" >
                                            </td>

                                            <td class="param-input-td thr nowrap text-center">
                                                <a class="color-desc del_two">删除</a>
                                                <a class="color-desc up">上移</a>
                                                <a class="color-desc down">下移</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <table class="layui-table">
                                    <tr>
                                        <td class="text-center notselect padding-none border-none">
                                            <button type="button" class="layui-btn full-width layui-btn-primary add_two">添加</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {else}
        {foreach $vo.content as $k=>$v}
        <div class="item item_one" data-one="{$k}">
            <div class="form-group">
                <label class="col-sm-2 control-label">
                    <button class="layui-btn layui-btn-sm layui-btn-danger del" type="button">删除</button>
                    小标题：<span class="nowrap"></span>
                </label>
                <div class='col-sm-8'>
                    <input type="text" name="content[{$k}][title]" title="请输入" placeholder="请输入标题" value="{$v.title}"
                           class="layui-input">
                    <p class="help-block">如‘第一天’</p>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">内容：<br>
                    <button class="layui-btn layui-btn-sm add_one" type="button">添加</button>
                </label>
                <div class='col-sm-8 layui-layer-border row_one'>
                    {notempty name='v.content'}
                    {foreach $v.content as $kk=>$vv}
                    <div class="item item_two" data-one="{$k}" data-two="{$kk}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                <button class="layui-btn layui-btn-sm layui-btn-danger del_one" type="button">删除</button>
                                小标题：<span class="nowrap"></span>
                            </label>
                            <div class='col-sm-8'>
                                <input type="text" name="content[{$k}][content][{$kk}][title]" title="请输入" placeholder="请输入标题" value="{$vv.title}"
                                       class="layui-input">
                                <p class="help-block">如‘上午’</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">内容：<span class="nowrap"></span></label>
                            <div class='col-sm-8'>
                                <div class="">
                                    <table class="layui-table margin-none">
                                        <tbody class="param-table-list item_three">
                                        {notempty name='vv.content'}
                                        {foreach $vv.content as $kkk=>$vvv}
                                        <tr class="transition" data-one="0" data-two="0" data-three="0">
                                            <td class="param-input-td four nowrap">
                                                <button data-file="one" data-type="png,jpg,jpeg" data-field="content[{$k}][content][{$kk}][content][{$kkk}][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                                            </td>
                                            <td class="param-input-td five nowrap text-center">
                                                <img data-tips-image style="height:auto;max-height:38px;" src="{$vvv.thumb ?: '__STATIC__/theme/img/image.png'}"/>
                                                <input type="hidden" name="content[{$k}][content][{$kk}][content][{$kkk}][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="{$vvv.thumb}" class="layui-input">
                                            </td>

                                            <td class="param-input-td two nowrap">
                                                <input name="content[{$k}][content][{$kk}][content][{$kkk}][content]" autocomplete="off" placeholder="请输入" value="{$vvv.content}" class="layui-input" >
                                            </td>

                                            <td class="param-input-td thr nowrap text-center">
                                                <a class="color-desc del_two">删除</a>
                                                <a class="color-desc up">上移</a>
                                                <a class="color-desc down">下移</a>
                                            </td>
                                        </tr>
                                        {/foreach}
                                        {/notempty}
                                        </tbody>
                                    </table>
                                </div>
                                <table class="layui-table">
                                    <tr>
                                        <td class="text-center notselect padding-none border-none">
                                            <button type="button" class="layui-btn full-width layui-btn-primary add_two">添加</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    {/foreach}
                    {/notempty}
                </div>
            </div>
        </div>
        {/foreach}
    {/if}
    </div>

    <div class="hr-line-dashed"></div>

    <div class="col-sm-8 col-sm-offset-2">
        <div class="layui-form-item text-left">
            <button class="layui-btn layui-btn-normal add" type="button">添加</button>
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
</form>

{/block}
{block name="script"}
<script>
    window.form.render();
    var key;
    var key_one;
    var key_two;
    $(function () {
        key = $('.row').children('.item').length - 1;
        key_one = $('.row_one').children('.item').length - 1;
        key_two = $('.param-table-list .transition').length - 1;
    });
    $('.add').on('click', function () {
        key++;
        var html = `<div class="item item_one" data-one="${key}">
            <div class="form-group">
                <label class="col-sm-2 control-label">
                    <button class="layui-btn layui-btn-sm layui-btn-danger del" type="button">删除</button>
                    小标题：<span class="nowrap"></span>
                </label>
                <div class='col-sm-8'>
                    <input type="text" name="content[${key}][title]" title="请输入" placeholder="请输入标题" value=""
                           class="layui-input">
                    <p class="help-block">如‘第一天’</p>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">内容：<br>
                    <button class="layui-btn layui-btn-sm add_one" type="button">添加</button>
                </label>
                <div class='col-sm-8 layui-layer-border row_one'>

                    <div class="item item_two" data-one="${key}" data-two="0">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                <button class="layui-btn layui-btn-sm layui-btn-danger del_one" type="button">删除</button>
                                小标题：<span class="nowrap"></span>
                            </label>
                            <div class='col-sm-8'>
                                <input type="text" name="content[${key}][content][0][title]" title="请输入" placeholder="请输入标题" value=""
                                       class="layui-input">
                                <p class="help-block">如‘上午’</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">内容：<span class="nowrap"></span></label>
                            <div class='col-sm-8'>
                                <div class="">
                                    <table class="layui-table margin-none">
                                        <tbody class="param-table-list item_three">

                                        <tr class="transition" data-one="0" data-two="0" data-three="0">
                                            <td class="param-input-td four nowrap">
                                                <button data-file="one" data-type="png,jpg,jpeg" data-field="content[${key}][content][0][content][0][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                                            </td>
                                            <td class="param-input-td five nowrap text-center">
                                                <img data-tips-image style="height:auto;max-height:38px;" src="__STATIC__/theme/img/image.png"/>
                                                <input type="hidden" name="content[${key}][content][0][content][0][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                                            </td>

                                            <td class="param-input-td two nowrap">
                                                <input name="content[${key}][content][0][content][0][content]" autocomplete="off" placeholder="请输入" class="layui-input" >
                                            </td>

                                            <td class="param-input-td thr nowrap text-center">
                                                <a class="color-desc del_two">删除</a>
                                                <a class="color-desc up">上移</a>
                                                <a class="color-desc down">下移</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <table class="layui-table">
                                    <tr>
                                        <td class="text-center notselect padding-none border-none">
                                            <button type="button" class="layui-btn full-width layui-btn-primary add_two">添加</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>`;
        $('.row').append(html);
    });
    $('.row').on('click','.add_one', function () {
        key_one++;
        var one = $(this).parents('.item_one').data('one');
        var html =`<div class="item item_two" data-one="${one}" data-two="${key_one}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                <button class="layui-btn layui-btn-sm layui-btn-danger del_one" type="button">删除</button>
                                小标题：<span class="nowrap"></span>
                            </label>
                            <div class='col-sm-8'>
                                <input type="text" name="content[${one}][content][${key_one}][title]" title="请输入" placeholder="请输入标题" value=""
                                       class="layui-input">
                                <p class="help-block">如‘上午’</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">内容：<span class="nowrap"></span></label>
                            <div class='col-sm-8'>
                                <div class="">
                                    <table class="layui-table margin-none">
                                        <tbody class="param-table-list">
                                        <tr class="transition">
                                            <td class="param-input-td four nowrap">
                                                <button data-file="one" data-type="png,jpg,jpeg" data-field="content[${one}][content][${key_one}][content][0][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                                            </td>
                                            <td class="param-input-td five nowrap text-center">
                                                <img data-tips-image style="height:auto;max-height:38px;" src="__STATIC__/theme/img/image.png"/>
                                                <input type="hidden" name="content[${one}][content][${key_one}][content][0][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                                            </td>

                                            <td class="param-input-td two nowrap">
                                                <input name="content[${one}][content][${key_one}][content][0][content]" autocomplete="off" placeholder="请输入" class="layui-input" >
                                            </td>

                                            <td class="param-input-td thr nowrap text-center">
                                                <a class="color-desc del_two">删除</a>
                                                <a class="color-desc up">上移</a>
                                                <a class="color-desc down">下移</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <table class="layui-table">
                                    <tr>
                                        <td class="text-center notselect padding-none border-none">
                                            <button type="button" class="layui-btn full-width layui-btn-primary add_two">添加</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>`;
        $(this).parents('.form-group').find('.row_one').append(html);
    });
    $('.row').on('click','.add_two', function () {
        key_two++;
        var one = $(this).parents('.item_one').data('one');
        var two = $(this).parents('.item_two').data('two');
        var html = `<tr class="transition">
                                            <td class="param-input-td four nowrap">
                                                <button data-file="one" data-type="png,jpg,jpeg" data-field="content[${one}][content][${two}][content][${key_two}][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                                            </td>
                                            <td class="param-input-td five nowrap text-center">
                                                <img data-tips-image style="height:auto;max-height:38px;" src="__STATIC__/theme/img/image.png"/>
                                                <input type="hidden" name="content[${one}][content][${two}][content][${key_two}][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                                            </td>

                                            <td class="param-input-td two nowrap">
                                                <input name="content[${one}][content][${two}][content][${key_two}][content]" autocomplete="off" placeholder="请输入" class="layui-input" >
                                            </td>

                                            <td class="param-input-td thr nowrap text-center">
                                                <a class="color-desc del_two">删除</a>
                                                <a class="color-desc up">上移</a>
                                                <a class="color-desc down">下移</a>
                                            </td>
                                        </tr>`;

        $(this).parents('.layui-table').parent('.col-sm-8').find('.param-table-list').append(html);
    });

    $('.row').on('click','.del',function () {
        $(this).parents('.item').remove();
    })
    $('.row').on('click','.del_one',function () {
        $(this).parents('.item_two').remove();
    })
    $('.row').on('click','.del_two',function () {
        $(this).parents('.transition').remove();
    })
    $('tbody.param-table-list').on('click','.up',function () {
        var parentsDiv = $(this).parents(".transition");
        var prev = parentsDiv.prev();
        if(prev.html()!=undefined){
            //prev.before(parentsDiv);
            prev.fadeOut("fast",function(){
                $(this).before(parentsDiv);
            }).fadeIn();
        }
    })

    $('tbody.param-table-list').on('click','.down',function () {
        var parentsDiv = $(this).parents(".transition");
        var next = parentsDiv.next();
        if(next.html()!=undefined){
            //next.after(parentsDiv);
            next.fadeOut("fast",function(){
                $(this).after(parentsDiv);
            }).fadeIn();
        }
    })
</script>
{/block}